<template>
    <div class="bg-gradient-to-r from-orange-200 to-orange-400 p-6 rounded-lg">
      <div class="flex flex-col md:flex-row">
        <div class="md:w-1/2 p-4">
          <h1 class="text-2xl font-bold text-brown-800">UP周六GO</h1>
          <p class="text-brown-700 mt-2">抢5折会员券</p>
          <a href="#" class="text-brown-600 mt-4 inline-block">立即查看 &gt;</a>
          <div class="mt-6">
            <img src="../../../assets/马桶.png" alt="Product Image" class="rounded-lg w-30 md:w-auto" />
          </div>
        </div>
        <div class="md:w-1/2 p-4 space-y-4">
          <div class="bg-white p-4 rounded-lg shadow-md flex items-center">
            <div class="flex-grow">
              <h2 class="text-lg font-semibold text-zinc-800">清凉舒适家</h2>
              <p class="text-zinc-600">空调至高6期免息</p>
              <a href="#" class="text-orange-500">进入会场 &gt;</a>
            </div>
            <div class="ml-4">
              <img src="../../../assets/空调.png" alt="Fan Image" class="rounded-lg w-60 md" />
            </div>
          </div>
          <div class="bg-white p-4 rounded-lg shadow-md flex items-center">
            <div class="flex-grow">
              <h2 class="text-lg font-semibold text-zinc-800">夏日好物精选</h2>
              <p class="text-zinc-600">兰蔻防晒低至259元</p>
              <a href="#" class="text-orange-500">进入会场 &gt;</a>
            </div>
            <div class="ml-4">
              <img src="../../../assets/兰蔻.jpg" alt="Product Image" class="rounded-lg w-60 md" />
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
</style>